<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位</title>
  </head>

  <body>
    <p>当前位置是：</p>
    <div id="demo"></div>
    <script>
      const x = document.getElementById("demo");
      const ax = getLocation(x);
      /* 
        position.coords:
            coords.accuracy	    位置精度
            coords.altitude	    海拔，海平面以上以米计
            coords.altitudeAccuracy	   位置的海拔精度
            coords.heading	    方向，从正北开始以度计
            coords.latitude	    十进制数的纬度
            coords.longitude	十进制数的经度
            coords.speed	    速度，以米/每秒计
            timestamp	        响应的日期/时间

        watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
        clearWatch() - 停止 watchPosition() 方法
      */

      /** 
       * @param ele html元素节点
       */
      function getLocation(ele) {
        // console.log(navigator);
        if (navigator.geolocation) {
          // 错误执行
          function error(error) {
            console.warn("定位不可用error:", error);
            switch (error.code) {
              case error.PERMISSION_DENIED:
                ele.innerHTML = "用户拒绝对获取地理位置的请求。";
                break;
              case error.POSITION_UNAVAILABLE:
                ele.innerHTML = "位置信息是不可用的。无法获取当前位置";
                break;
              case error.TIMEOUT:
                ele.innerHTML = "请求用户地理位置超时。";
                break;
              case error.UNKNOWN_ERROR:
                ele.innerHTML = "未知错误。";
                break;
            }
          }
          // 成功执行
          function success(position) {
            // console.log("定位可用", position);
            ele.innerHTML = `纬度: ${position.coords.latitude}<br>经度: ${position.coords.longitude}`;
          }
          navigator.geolocation.getCurrentPosition(success, error);
          /** 持续返回移动中的地址 */
          navigator.geolocation.watchPosition(success);
        } else {
          ele.innerHTML = "该浏览器不支持获取地理位置。";
        }
      }
    </script>
  </body>
</html>
